<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- params 传递参数，to 的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">
          {{m.title}}
        </router-link>&nbsp;&nbsp; -->

        <!-- params 传递参数，to 的对象写法 -->
        <router-link :to="{
          // path: '/home/message/detail',
          name: 'detail',
          params:{
            id: m.id,
            title: m.title
          }
        }"> 
          {{m.title}}
        </router-link>&nbsp;&nbsp;
        <button @click="pushShow(m)">push查看</button>
        <button @click="replaceShow(m)">replace查看</button>
      </li> 
      <hr>
      <router-view></router-view>
    </ul>
</div>
</template>

<script>
  export default {
    name:'Message',
    data(){
      return {
        messageList: [
          {id:'001', title:'消息 001 '},
          {id:'002', title:'消息 002 '},
          {id:'003', title:'消息 003 '}
        ]
      }
    },
    methods: {
      pushShow(m){
        this.$router.push({
          name: 'detail',
          params:{
            id: m.id,
            title: m.title
          }
        })
      },
      replaceShow(m){
        this.$router.replace({
          name: 'detail',
          params:{
            id: m.id,
            title: m.title
          }
        })
      },
    },
  }
</script> 